<template>
    <h1>{{ sum }}</h1>
    <button @click="changeSum">数据加一</button>
    <h1>{{ obj }}</h1>
    <button @click="changeAge">对象加一</button>
</template>


<script setup lang="ts" name="WacthRef">
import { ref, watch } from 'vue'
let sum = ref(0)
let obj = ref({ name: '李四', age: 90 })
function changeSum() {
    sum.value += 1
}
function changeAge() {
    obj.value.age += 1
}
// 监听普通数据
watch(sum, (newVal, oldVal) => {
    console.log("sum发生了变化");
})

/* 
   监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
   watch的第一个参数是：被监视的数据
   watch的第二个参数是：监视的回调
   watch的第三个参数是：配置对象（deep、immediate等等.....） 
 */
// 监听对象类型
watch(obj, (newVal, oldVal) => {
    console.log("obj发生了变化");
}, { deep: true })
</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>